<!--首页-->
<template>
    <div class="Housing">

            <div style="width: 976.670px;height: 90px;margin: 0px auto;">
                <ul>
                    <li class="TJMK">
                        <i class="el-icon-s-order TJMKNR" style=";font-size: 50px ;color: #31C3A6;"></i><div class="TJMKNR"><div class="TJMKNRwenZi">视频总数</div><div style="size: 50px" class="TJMKNRwenZi">{{total}}</div></div>
                    </li>
                    <li class="TJMK">
                        <i class="el-icon-s-order TJMKNR" style=";font-size: 50px ;color: #31C3A6;"></i><div class="TJMKNR"><div class="TJMKNRwenZi">视频浏览数</div><div style="size: 50px" class="TJMKNRwenZi">{{views}}</div></div>
                    </li>
                    <li class="TJMK">
                        <i class="el-icon-s-marketing TJMKNR" style=";font-size: 50px ;color: #31C3A6;"></i><div class="TJMKNR"><div class="TJMKNRwenZi">收藏量</div><div style="size: 50px" class="TJMKNRwenZi">{{collection}}</div></div>
                    </li>
                    <li class="TJMKmowei">
                        <i class="el-icon-s-marketing TJMKNR" style="font-size: 50px ;color: #31C3A6;"></i><div class="TJMKNR"><div class="TJMKNRwenZi">点赞量</div><div style="size: 50px" class="TJMKNRwenZi">{{like}}</div></div>
                    </li>
                </ul>
            </div>
            <div style="width: 976.67px;height: 90px;margin: 0px auto;" class="XiaoMoKuaiHousing">
                <div class="XiaoMoKuaiBiaoTi">
                    待处理事务
                </div>
                <div class="XiaoMoKuaiNeiRong">
                    <div class="MoKuanWenZi" style="float: left;line-height: 50px;width: 480px">您有课程审核，请尽快处理  &nbsp &nbsp &nbsp &nbsp(<span class="DCLTS">{{videoAuditCount}}</span>)</div>
                    <div class="MoKuanWenZi" style="float: left;line-height: 50px;width: 470px">您有商品审核，请尽快处理  &nbsp &nbsp &nbsp &nbsp(<span class="DCLTS">{{commodityAuditCount}}</span>)</div>
                </div>
            </div>
            <div class="XiaoMoKuaiHousing" style="width: 976.67px;height: 160px;margin: 20px auto;">
                <div class="XiaoMoKuaiBiaoTi">
                    运营快捷入口
                </div>
                <el-row :gutter="0" class="KuaiSuRuKou">
                    <el-col :span="3" class="RuKou"><i class="el-icon-star-off" style=";font-size: 50px ;color: #AAAAAA;"></i><div class="MoKuanWenZi">微圈管理</div></el-col>
                    <el-col :span="4" class="RuKou"><i class="el-icon-star-off" style=";font-size: 50px ;color: #AAAAAA;"></i><div class="MoKuanWenZi">添加微圈文章</div></el-col>
                    <el-col :span="3" class="RuKou"><i class="el-icon-star-off" style=";font-size: 50px ;color: #AAAAAA;"></i><div class="MoKuanWenZi">课程管理</div></el-col>
                    <el-col :span="4" class="RuKou"><i class="el-icon-s-management" style=";font-size: 50px ;color: #AAAAAA;"></i><div class="MoKuanWenZi">添加课程</div></el-col>
                    <el-col :span="3" class="RuKou"><i class="el-icon-user" style=";font-size: 50px ;color: #AAAAAA;"></i><div class="MoKuanWenZi">课程审核管理</div></el-col>
                    <el-col :span="4" class="RuKou"><i class="el-icon-user" style=";font-size: 50px ;color: #AAAAAA;"></i><div class="MoKuanWenZi">课程评论管理</div></el-col>
                    <el-col :span="3" class="RuKou"><i class="el-icon-user" style=";font-size: 50px ;color: #AAAAAA;"></i><div class="MoKuanWenZi">微圈评论管理</div></el-col>
                </el-row>
            </div>
        <div class="XiaoMoKuaiHousing02">
            <div class="XiaoMoKuaiHousing" style="width: 476px;height: 160px;margin: 0px 20px 0px 0px;float:left">
                <div class="XiaoMoKuaiBiaoTi">
                    商品总览
                </div>
                <el-row :gutter="20" style="text-align: center;padding: 27px">
                    <el-col :span="12"><div class="grid-content bg-purple course_statistics" style="color: #F04943;padding-bottom: 5px">{{totalNumberOfCourses}}</div><div>课程数量（已上架）</div></el-col>
                    <el-col :span="12"><div class="grid-content bg-purple course_statistics" style="color: #F04943;font-size: 23px;padding-bottom: 5px">{{totalNumberOfGoods}}</div><div>商品数量（已上架）</div></el-col>
                </el-row>

            </div>
            <div class="XiaoMoKuaiHousing" style="width: 480px;height: 160px;margin: 0px auto 0px auto;float:left;">
                <div class="XiaoMoKuaiBiaoTi">
                    用户总览
                </div>
                <el-row :gutter="20" style="text-align: center;padding: 27px" >
                    <el-col :span="6"><div class="grid-content bg-purple course_statistics" style="color: #F04943;font-size: 23px;padding-bottom: 5px">{{newToday}}</div><div>今日新增</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple course_statistics" style="color: #F04943;font-size: 23px;padding-bottom: 5px">{{addedYesterday}}</div><div>昨日新增</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple course_statistics" style="color: #F04943;font-size: 23px;padding-bottom: 5px">{{newThisMonth}}</div><div>本月新增</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple course_statistics" style="color: #F04943;font-size: 23px;padding-bottom: 5px">{{allUsers}}</div><div>全部用户</div></el-col>
                </el-row>
            </div>
        </div>

        <div class="XiaoMoKuaiHousing" style="width: 976.67px;height: 360px;margin: 0px auto;">
                <div class="XiaoMoKuaiBiaoTi">
                    课程统计
                </div>
            <el-row :gutter="20" style="padding: 10px">
                <el-col :span="5">
                    <div class="grid-content bg-purple KeChengTongJi_left">
                        <div class="MoKuanWenZi TiaoJianGe">
                            上{{KeChengTongJi_left01}}新增课程总数
                        </div>
                        <div class="MoKuanWenZi  TiaoJianGe course_statistics" style="margin-left: 3px;font-size: 25px">{{BenZhouXinZengKeCheng}}</div>
                        <div class="MoKuanWenZi TiaoJianGe"><i :class=zengzhanglv><span>{{KeChengTongJi_left_percentage}}%</span></i><span>同比上上{{KeChengTongJi_left01}}</span></div>
                    </div>
                    <div class="grid-content bg-purple KeChengTongJi_left">
                        <div class="MoKuanWenZi TiaoJianGe">
                            上{{KeChengTongJi_left01}}申请通过率
                        </div>
                        <div class="MoKuanWenZi course_statistics TiaoJianGe" style="margin-left: 3px;font-size: 25px">{{BenZhouXinZengKeCheng02}}</div>
                        <div class="MoKuanWenZi TiaoJianGe"><i :class=tonggulv><span>{{KeChengTongJi_left_percentage02}}%</span></i><span>同比上上{{KeChengTongJi_left01}}</span></div>
                    </div>
                </el-col>
                <el-col :span="19">
                    <div style="width: 750px;height: 40px">
                        <div class="MoKuanWenZi" style="float:left;line-height: 40px;margin-right: 0px;font-size: 16px;color: #8AE09F">课程新增数量折线图</div>
                        <div style="float:left;margin-right: 0px;line-height: 40px">
                            <el-button round style="float:left;margin: 0px 40px;height: 35px;margin-top: 2.5px;line-height: 6px"  @click="JiYiZhou" class="MoKuanWenZi">近一周</el-button>
                            <el-date-picker
                                    v-model="value2"
                                    type="daterange"
                                    align="right"
                                    unlink-panels
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    :picker-options="pickerOptions" style="float:left;">
                            </el-date-picker>
                        </div>
<!--                        <el-row >-->
                            <el-button icon="el-icon-search" circle style="border: white " @click="AddQuery(value2)"></el-button>
<!--                        </el-row>-->
                    </div>
                    <div  class="echart" id="chartLineBox" :style="{ float: 'left', width: '100%', height: '300px' }"></div>
                </el-col>
            </el-row>
        </div>
    </div>

</template>

<script>

    import * as echarts from "echarts";


    // import Vue from 'vue'
    export default {
        name: "TeacherHome",

        data(){
            return{
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                xAxisData:null,
                seriesData:null,
                KeChengTongJi_left01:"周",
                BenZhouXinZengKeCheng:1000,
                KeChengTongJi_left_percentage:"10",
                value2:null,
                total:0,
                views:0,
                collection:0,
                like:0,
                commodityAuditCount:0,
                videoAuditCount:0,
                totalNumberOfCourses:0,
                totalNumberOfGoods:0,
                newToday:0,
                addedYesterday:0,
                newThisMonth:0,
                allUsers:0,
                BenZhouXinZengKeCheng02:0,
                KeChengTongJi_left_percentage02:0,
                tonggulv:"el-icon-top",
                zengzhanglv:"el-icon-bottom"
            }
        },
        mounted(){
            this.init();
            const end = new Date();
            const start = new Date();
            // start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            // this.value2=[start,end];
            this.ShPinZOngLiang();
            this.DaiBanFangFa();
            this.ShangPinShuJuHuoQu();
            this.YongHuZongLan();
            this.JiYiZhou();
            this.ShangZhouKeChengZengZhangZongLiang();
            this.ShangZhouKeChengShenQingTongGuoXinXi();
        }
        ,
        methods:{
            //上周新增课程总量以及同比率
            async ShangZhouKeChengShenQingTongGuoXinXi(){
                let res = await this.$http.get('PassingRate',{
                    params:{
                    }
                });
                console.log(res)

                this.BenZhouXinZengKeCheng02 = res.data.value+"%";
                if (res.data.yoyRate<0){
                    this.tonggulv="el-icon-bottom";
                    this.KeChengTongJi_left_percentage02 = res.data.yoyRate*-1;
                }else {
                    this.tonggulv="el-icon-top";
                    this.KeChengTongJi_left_percentage02 = res.data.yoyRate;
                }

            },
            //上周新增课程总量以及同比率
            async ShangZhouKeChengZengZhangZongLiang(){
                let res = await this.$http.get('ShangZhouXinZengZongLiang',{
                    params:{
                    }
                });
                console.log(res)
                console.log(res.data.yoyRate);
                this.BenZhouXinZengKeCheng = res.data.value;
                if (res.data.yoyRate<0){
                    this.zengzhanglv="el-icon-bottom";
                    this.KeChengTongJi_left_percentage = (res.data.yoyRate)*-1;
                }else {
                    this.zengzhanglv="el-icon-top";
                    this.KeChengTongJi_left_percentage = (res.data.yoyRate);
                }


            },
            //两个时间之间的新增查询方法
            async AddQuery(DateTime){
                if (DateTime != null) {
                    var DateTime1 = DateTime[0];
                    var DateTime2 = DateTime[1];
                    let res = await this.$http.get('CourseStatisticsLiangGeShiJianZhiJian',{
                        params:{
                            DateTime01:DateTime1,
                            DateTime02:DateTime2
                        }
                    });
                    this.xAxisData=res.data.key;
                    this.seriesData=res.data.value;

                    this.init()
                }else {
                    console.log("八嘎 先输入日期")

                }
            },
            // 近一周的课程增长
            async JiYiZhou(){
                console.log("adasdfasdf")
                let res = await this.$http.get('CourseStatisticsJiYiZhou',{
                    params:{}
                });
                this.xAxisData=res.data.key;
                this.seriesData=res.data.value;
                this.init()
            },
            async ShangPinShuJuHuoQu(){


                let res = await this.$http.get('CommodityOverviewSuju',{
                    params:{}
                });
                this.totalNumberOfCourses=res.data.totalNumberOfCourses;
                this.totalNumberOfGoods=res.data.totalNumberOfGoods;
            }
            ,
            async YongHuZongLan(){
                let res = await this.$http.get('getUserOverview',{
                    params:{}
                });
                this.newToday=res.data.newToday;
                this.addedYesterday=res.data.addedYesterday;
                this.newThisMonth=res.data.newThisMonth;
                this.allUsers=res.data.allUsers;
            }
            ,
            async DaiBanFangFa(){
                let res = await this.$http.get('DaiBanTiaoShu',{
                    params:{}
                });
                this.commodityAuditCount=res.data.commodityAuditCount;
                this.videoAuditCount=res.data.videoAuditCount;

            }
            ,
            async ShPinZOngLiang(){
                let res = await this.$http.get('bn',{
                    params:{}
                });
                this.total=res.data.total;
                this.views=res.data.views;
                this.collection=res.data.collection;
                this.like=res.data.like;
            },
            init() {
                this.chartLine = echarts.init(document.getElementById('chartLineBox'));

                // 指定图表的配置项和数据
                var option = {
                    tooltip: {              //设置tip提示
                        trigger: 'axis'
                    },

                    legend: {               //设置区分（哪条线属于什么）
                        data:['汇报']
                    },
                    color: ['#8AE09F', '#FA6F53'],       //设置区分（每条线是什么颜色，和 legend 一一对应）
                    xAxis: {                //设置x轴
                        type: 'category',
                        boundaryGap: false,     //坐标轴两边不留白
                        data: this.xAxisData,
                        name: 'DATE',           //X轴 name
                        nameTextStyle: {        //坐标轴名称的文字样式
                            color: '#FA6F53',
                            fontSize: 16,
                            padding: [0, 0, 0, 20]
                        },
                        axisLine: {             //坐标轴轴线相关设置。
                            lineStyle: {
                                color: '#FA6F53',
                            }
                        }
                    },
                    yAxis: {
                        name: 'SALES VOLUME',
                        nameTextStyle: {
                            color: '#FA6F53',
                            fontSize: 16,
                            padding: [0, 0, 10, 0]
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#FA6F53',
                            }
                        },
                        type: 'value'
                    },
                    series: [
                        {
                            name: '平均成绩',
                            data:  this.seriesData,
                            type: 'line',               // 类型为折线图
                            lineStyle: {                // 线条样式 => 必须使用normal属性
                                normal: {
                                    color: '#8AE09F',
                                }
                            },
                        },
                        // {
                        //     name: '学生成绩',
                        //     data: [120, 200, 150, 80, 70, 110, 130],
                        //     type: 'line',
                        //     lineStyle: {
                        //         normal: {
                        //             color: '#FA6F53',
                        //         }
                        //     },
                        // }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                this.chartLine.setOption(option);
            }
        }
    }

</script>

<style scoped>
    ul li{
        list-style: none;
    }
    div{
        box-sizing: border-box;
    }
    .TJMK{
        border: 2px solid #E5E5E5;
        float: left;
        margin: 0px 20px 0px 0px;
        width:228px;
        /*padding: 5px;*/
        box-sizing: border-box;
        padding: 10px 6px;
    }
    ul{
        padding-left:0px;
        color: #827284;
    }
    .TJMKNR{
        float: left;
        box-sizing: border-box;
    }
    .TJMKmowei{
        border: 2px solid #E5E5E5;
        float: left;
        /*margin: 0px 0px 0px 0px;*/
        width:232px;
        box-sizing: border-box;
        padding: 10px 6px;
        line-height: 23px;

    }
    .Housing{
        /*align-items: center;*/
    }
    i{
        padding-right: 8px;
    }
    .TJMKNRwenZi{
        height: 24px;
        line-height: 24px;
    }
    .DCLTS{
        color: red;
    }
    .XiaoMoKuaiBiaoTi{
        background-color: #F3F3F3;
        border-bottom: 1px solid #E5E5E5;
        height: 33px;
        font-size: 15px;
        font-weight:bold;
        line-height: 33px;
        box-sizing: border-box;
        color: #6E6667;
        padding-left: 10px;
    }
    .XiaoMoKuaiHousing{
        border: 2px solid #E5E5E5;
        box-sizing: border-box;
    }
    .XiaoMoKuaiNeiRong{
        height: 50px;
        box-sizing: border-box;
        padding: 6px 10px;
    }
    .MoKuanWenZi{
        color:#6D5C5B;
    }
    .XiaoMoKuaiHousing02{

        height: 160px;
        margin: 0px auto;
        width: 976.67px;
    }
    .RuKou{
        height: 120px;
    }
    .RuKou div{
        text-align: center;
    }
    .RuKou i{
        text-align: center;
        width: 100%;
        margin: 20px 0px 10px 0px;
    }
    .course_statistics{
        font-size: 23px;
    }
    .KeChengTongJi_left{
        margin: 30px 0px 10px 5px;
        padding-left: 18px;
    }
    .el-icon-bottom{
        color: #F04943;
    }
    .el-icon-top{
        color: #31C3A6;
    }
    .TiaoJianGe{
        margin: 8px 0px;
    }
</style>